<template>
  <view class="home">
    <view class="home-bg"> </view>

    <view class="wrapper">
      <!-- 事件管理 -->
      <view class="wrapper-item2">
        <view class="headline">事件管理</view>

        <view class="wrapper-item">
          <view class="list-wrapper">
            <view
              class="item"
              v-for="(item, index) in eventManageList"
              :key="index"
              :data-url="item.url"
              @click="handleClickRouter"
            >
              <text
                class="badgeText"
                :class="item.value > 99 ? 'night' : ''"
                v-if="item.value"
                >{{ item.value > 99 ? "99+" : item.value }}</text
              >
              <image class="img" :src="item.icon"></image>
              <view class="text">{{ item.text }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 设备清洗 -->
      <view class="wrapper-item2">
        <view class="headline"> 设备清洗</view>

        <view class="clean-wrapper">
          <view
            class="list-item"
            v-for="(item, index) in cleanRecord"
            :key="index"
            :data-url="item.url"
            @click="handleClickRouter"
            :style="{ background: item.bgcolor }"
          >
            <view>
              <image :src="item.listImg" class="listIcon"></image>
            </view>

            <view>
              <view class="listName" :style="{ color: item.textColor }">
                {{ item.text }}
              </view>
              <view class="list-look" :style="{ color: item.textInfo }">
                {{ item.infotext }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 最近一次等级评定检查 -->
      <view class="wrapper-item">
        <view
          class="wrapper-bar"
          style="margin-bottom: 10rpx"
          :data-url="`/ratingExamine/ratingExamine/ratingAssess`"
          @click="handleClickRouter"
        >
          <view class="wrapper-bartitle"> 最近一次等级评定检查 </view>
          <view class="look-all">查看全部> </view>
        </view>

        <view
          class="evaluate"
          :data-url="`/ratingExamine/ratingDetail/ratingDetail?data=${encodeURIComponent(
            JSON.stringify(evaluateList)
          )}`"
          @click="handleClickRouter"
          v-if="evaluateList.restaurantName"
        >
          <view class="lt">
            <view class="clause">
              餐厅名称：<text>{{ evaluateList.restaurantName }}</text>
            </view>
            <view class="clause">
              检查时间：<text>{{ evaluateList.createTime }}</text>
            </view>
            <view class="clause" style="margin-bottom: 0">
              等级评定：
              <text
                :style="{
                  color:
                    evaluateList.gradeStatus == 1
                      ? '#0CAD83'
                      : evaluateList.gradeStatus == 2
                        ? '#FFBB01'
                        : '#F23124',
                }"
              >
                {{
                  evaluateList.gradeStatus == 1
                    ? "A"
                    : evaluateList.gradeStatus == 2
                      ? "B"
                      : "C"
                }}级
              </text>
            </view>
          </view>
          <view class="rt">
            <!-- gradeStatus 1 :A级     2：B级别   3：c级 -->
            <image
              :src="
                evaluateList.gradeStatus == 1
                  ? baseImgUrl + 'evaluate_1.png'
                  : evaluateList.gradeStatus == 2
                    ? baseImgUrl + 'evaluate_2.png'
                    : baseImgUrl + 'evaluate_3.png'
              "
              mode="aspectFill"
            ></image>
          </view>
        </view>
      </view>

      <!-- 行业动态 -->
      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle"> 行业动态 </view>
        </view>

        <view
          class="allList homeIndustry"
          v-for="(item, index) in dataSource"
          :key="index"
          :data-url="`/workList/workList/workDetail?data=${encodeURIComponent(
            JSON.stringify({ item, index: 3 })
          )}`"
          @click="handleClickRouter"
        >
          <view class="lt">
            <image
              :src="
                item.coverUrl
                  ? imgPrefix + item.coverUrl
                  : baseImgUrl + 'tradeImg.png'
              "
              mode="aspectFill"
            >
            </image>
          </view>
          <view class="rt" style="padding-left: 18rpx">
            <view class="line2-hidden title">{{ item.title }}</view>
            <view class="footer"> {{ item.createTime }} </view>
          </view>
        </view>
        <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>

        <view v-if="!dataSource.length">
          <u-empty
            mode="list"
            text="暂无内容！"
            :icon="baseImgUrl + 'no-icon2.png'"
          >
          </u-empty>
        </view>
      </view>
    </view>
    <!--  <u-modal :show="show" :title="title">
      <view class="slot-phone">
        <uni-easyinput
          :inputBorder="true"
          placeholder="请输入手机号"
          maxlength="11"
        ></uni-easyinput>
      </view>
    </u-modal> -->

    <!-- 特色功能 -- 选择企业 -->
    <u-picker
      :show="pickerShow"
      :columns="columns"
      :keyName="keyName"
      @confirm="showConfirm"
      @close="pickerClose"
      @cancel="pickerCancel"
      :closeOnClickOverlay="true"
    ></u-picker>

    <!-- #ifdef MP-WEIXIN -->
    <view class="attention" v-if="token && focusOn">
      <image
        :src="baseImgUrl + 'close_off.png'"
        mode=""
        @click="focusHandle"
      ></image>
      <official-account v-if="token && focusOn"></official-account>
    </view>
    <!-- #endif -->

    <custom-tab-bar :tabBarIndex="tabBarIndex" ref="tabRef" />
  </view>
</template>

<script>
import {
  noticeMessagePage,
  eventRecordCount,
  evaluateCheckTaskPage,
} from "@/api/home.js";
import { findEnableDictItemsbyCode } from "@/api/api.js";
import mixin from "@/utils/mixin.js";
import { handleClickRouter } from "@/utils/util.js";

export default {
  mixins: [mixin],
  data() {
    return {
      token: "",
      show: false,
      title: "请完善手机号信息",
      phone: uni.getStorageSync("phone") || "",
      baseImgUrl: this.$baseImgUrl,
      imgPrefix: "",
      focusOn: false,
      tabBarIndex: 0,
      varList: ["一号", "二号的", "三号"],
      eventManageList: [
        {
          id: 0,
          text: "设备预警",
          value: 0,
          icon: this.$baseImgUrl + "listIcon_1.png",
          url: "/deviceManagement/alarmList/earlyWarn",
        },
        {
          id: 1,
          text: "设备告警",
          value: 0,
          icon: this.$baseImgUrl + "listIcon_2.png",
          url: "/deviceManagement/alarmList/alertsWarn",
        },
        {
          id: 2,
          text: "设备离线",
          value: 0,
          icon: this.$baseImgUrl + "listIcon_3.png",
          url: "/deviceManagement/alarmList/deviceOffline",
        },
        {
          id: 3,
          text: "处罚记录",
          value: 0,
          icon: this.$baseImgUrl + "listIcon_5.png",
          url: "/penaltyRecord/penaltySol/penaltySol",
        },
        {
          id: 4,
          text: "核查整改",
          value: 0,
          icon: this.$baseImgUrl + "listIcon_4.png",
          url: "/verification/rectification/rectification",
        },
      ],
      cleanRecord: [
        {
          id: 0,
          url: "/rinseList/addUploadrinse/addUploadrinse",
          text: "上传清洗记录",
          textColor: "#4D65A1",
          bgcolor: "#F2F6FF",
          listImg: this.$baseImgUrl + "rinse_1.png",
          infotext: "每月上传一次",
          textInfo: "#C0CDEC",
        },
        {
          id: 3,
          url: "/rinseList/rinseRecord/rinseRecord",
          text: "查看清洗记录",
          textColor: "#A27750",
          bgcolor: "#FCF7F1",
          listImg: this.$baseImgUrl + "rinse_2.png",
          infotext: "查看清洗历史",
          textInfo: "#E5CAA9",
        },
      ],
      evaluateList: {}, //等级评定
      dataSource: [],
      pageBottom: false,
      pageConfig: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  onShow() {
    let stateFocusOn = uni.getStorageSync("focusOn");
    // let isshow = uni.getStorageSync("phone");
    let scene = uni.getStorageSync("scene");
    if (!stateFocusOn.toString().length) {
      if (
        scene == "1011" ||
        scene == "1017" ||
        scene == "1025" ||
        scene == "1047" ||
        scene == "1124" ||
        scene == "1001" ||
        // scene == "1038" || 当从其他小程序返回小程序（场景值1038）时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态
        scene == "1041" ||
        // scene == "1089" ||  当小程序从聊天顶部场景（场景值1089）中的「最近使用」内打开时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态
        scene == "1090" ||
        scene == "1104" ||
        scene == "1131" ||
        scene == "1187"
      ) {
        stateFocusOn = true;
      }
    }
    this.focusOn = stateFocusOn;

    this.token = uni.getStorageSync("X-MINI-TOKEN");
    if (!this.token) return;

    findEnableDictItemsbyCode("static_server").then((res) => {
      this.imgPrefix = res.result[0].value;
      uni.setStorageSync("imgPrefix", res.result[0].value);
    });

    this.dataSource = [];
    this.pageConfig.pageNo = 1;
    this.getCount();
    this.assessList();
    this.getList();
  },
  onReachBottom() {
    let current = (this.pageConfig.pageNo += 1);
    let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
    if (current <= pages) {
      this.getList();
    }
  },
  methods: {
    handleClickRouter,
    focusHandle() {
      this.focusOn = false;
      uni.setStorageSync("focusOn", this.focusOn);
    },
    getCount() {
      eventRecordCount().then((res) => {
        let {
          earlyWarningCount,
          giveAnAlarmCount,
          offLineCount,
          workOrderCount,
        } = res.result;
        this.eventManageList[0].value = earlyWarningCount;
        this.eventManageList[1].value = giveAnAlarmCount;
        this.eventManageList[2].value = offLineCount;
        // this.eventManageList[3].value = ;
        this.eventManageList[4].value = workOrderCount;
      });
    },
    assessList() {
      let data = {
        pageNo: this.pageConfig.pageNo,
        pageSize: this.pageConfig.pageSize,
      };

      evaluateCheckTaskPage(data).then((res) => {
        this.evaluateList = res.result.records[0] || {};
      });
    },
    getList() {
      let data = {
        noticeType: 1,
        pageNo: this.pageConfig.pageNo,
        pageSize: this.pageConfig.pageSize,
      };

      noticeMessagePage(data).then((res) => {
        this.dataSource = this.dataSource.concat(res.result.records || []);
        this.pageConfig.total = res.result.total;
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f3f3f3 !important;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.home {
  flex: 1;
  background-color: #f3f3f3;
  margin-bottom: 50px;
  .home-bg {
    width: 100%;
    height: 200rpx;
    background: #00c9ae;
  }

  .home-title {
    position: absolute;
    top: 10rpx;
    left: 6%;
    color: #ffffff;
    font-size: 34rpx;
    font-weight: bold;
  }

  .wrapper {
    position: absolute;
    top: 10rpx;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 50px;

    .wrapper-item {
      margin-bottom: 1vh;
      padding: 35rpx 40rpx;
      background-color: #ffffff;
      border-radius: 10rpx;
      width: 702rpx;
      .wrapper-bar {
        display: flex;
        justify-content: space-between;
        height: 40rpx;
        .wrapper-bartitle {
          display: flex;
          font-size: 30rpx;
          font-weight: bold;
        }

        .look-all {
          color: #bbbbbb;
        }

        .pullImg {
          width: 72rpx;
          height: 45rpx;
          cursor: pointer;
        }
      }

      .evaluate {
        display: flex;
        padding-top: 25rpx;
        border-top: 1px solid #e6e6e6;
        font-size: 28rpx;
        font-weight: 500;

        .lt {
          width: 470rpx;
          max-width: 470rpx;
          .clause {
            margin-bottom: 20rpx;
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #a1a1a1;

            text {
              color: #666666;
            }
          }
        }

        .rt {
          width: 150rpx;
          height: 150rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .wrapper-item2 {
      position: relative;
      margin: 0 auto;
      margin-bottom: 1vh;
      background-color: #ffffff;
      border-radius: 10rpx;
      width: 710rpx;

      .headline {
        padding: 20rpx 0rpx 0rpx 40rpx;
        color: #4a4b50;
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    .list-wrapper {
      display: flex;
      font-size: 24rpx;
      color: #272727;
      flex-wrap: wrap;
      bottom: 14.543vh;
      left: 25rpx;

      .item {
        position: relative;
        text-align: center;
        width: 20%;

        .badgeText {
          position: absolute;
          top: -15rpx;
          right: 5rpx;
          width: 40rpx;
          height: 40rpx;
          line-height: 40rpx;
          color: #ffffff;
          font-size: 26rpx;
          font-weight: 500;
          background: #fb1a00;
          border-radius: 50%;
        }

        .night {
          font-size: 22rpx;
        }

        .img {
          margin-bottom: 1vh;
          width: 100rpx;
          height: 100rpx;
        }
      }
    }

    .clean-wrapper {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
      padding: 0rpx 35rpx 30rpx;
      font-size: 30rpx;
      font-weight: bold;

      .list-item {
        position: relative;
        display: flex;
        justify-content: space-between;
        padding: 15rpx 20rpx;
        width: 310rpx;
        height: 140rpx;
        border-radius: 16rpx;

        .listName {
          margin: 15rpx 0 10rpx;
          font-size: 26rpx;
          font-weight: bold;
        }

        .list-look {
          font-size: 24rpx;
          font-weight: 400;
        }
      }

      .listIcon {
        margin-right: 15rpx;
        width: 100rpx;
        height: 100rpx;
      }
    }
  }

  .homeIndustry {
    padding: 20rpx 0;

    .lt {
      image {
        border-radius: 16rpx;
      }
    }

    .rt {
      .title {
        height: auto;
      }
    }
  }

  .attention {
    position: fixed;
    bottom: 100rpx;
    z-index: 1000;
    width: 100%;
    background: pink;
    image {
      position: absolute;
      right: 0;
      z-index: 1001;
      width: 50rpx;
      height: 50rpx;
    }
  }
}
</style>
